<template>
  <div>
    <div class="top" ></div>
    <van-row>
      <van-col offset="1">
        <h3 style="text-align: center;">各位同学大家好，本问卷是调查同学们计算机课程的学习情况，调查结果不会对你有任何的影响，请放心填写，不做实名调查，谢谢！</h3>
      </van-col>
    </van-row>
    <div class="center">
    <div v-for="(item,index) in currentPaperList" :key="item.index" >
      <div style="background-color: #fbfbfb;margin-bottom: 20px;padding-bottom: 20px;padding-left: 70px;color: #667d7d">
      <van-row>
        <van-col >
          <p >{{item.index+':'+item.content}}</p>
        </van-col>
      </van-row>
      <van-checkbox-group v-model="answers[item.index-1]" :max="1" v-if="!item.type">
        <van-checkbox
          v-for="(question) in item.questions"
        :key="question"
          :name="question"
        >{{question }}
        </van-checkbox>
      </van-checkbox-group>
      <van-checkbox-group v-model="answers[item.index-1]" v-if="item.type">
        <van-checkbox
          v-for="(question) in item.questions"
          :key="question"
          :name="question"
        >{{question }}
        </van-checkbox>
        <van-checkbox
          :key="'其他'"
          :name="'其他'"
        >其他
        </van-checkbox>
      </van-checkbox-group>
      </div>
    </div>
      <div style="display: flex;justify-content: center;margin-bottom: 40px;padding-top: 120px">
        <van-button type="primary" style="cursor: pointer;margin-right: 40px" @click="back()">上一页</van-button>
        <van-button type="primary" style="cursor: pointer" @click="next()">{{currentIndex==4?'提交':'下一页'}}</van-button>
      </div>
    </div>
    <div class="bottom">

    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import {paper} from'../constants'
import {baseUrl} from '../constants'

export default {
  name: 'questions',
  data () {
    return {
      area: { maxHeight: 300, minHeight: 100 },
      paperKey:'',
      paperList:[],
      currentPaperList:[],
      currentIndex:1,
      answers:[],
      multiple:[],
    }
  },
  mounted(){
    this.paperKey = this.$route.params.key;
    this.user=this.$store.state.user;
    this.paperList = paper[this.paperKey];
    this.currentPaperList = this.paperList.slice(0,3*this.currentIndex);
  },
  methods: {
    toggle (index) {
      this.$refs.checkboxes[index].toggle()
    },
    back(){
        if(this.currentIndex==1){
          this.$dialog.alert({
            message:'当前为第一页，请点击下一页'
          })
          return;
        }else {
          this.currentIndex-=1;
          this.currentPaperList = this.paperList.slice((this.currentIndex-1)*3,this.currentIndex*3);
          return;
        }
    },
    next(){
        if(this.currentIndex==4){
          //答案提交
          if(this.answers.length==10){
              let data1={type:this.paperKey,answers:this.answers};
              this.axios.post(baseUrl.serverUrl+'/user/answer?id='+this.user.id,{content:JSON.stringify(data1)}).then(res=>{
                 if(res.data.status==1){
                   this.$dialog.alert({
                     message:'调查提交成功,谢谢您的配合'
                   })
                   this.$router.push(`/tip/1`);
                 }else {
                   this.$dialog.alert({
                     message:'提交失败请重试'
                   })
                 }
              })
               //向服务器提交
          }else {
            this.$dialog.alert({
              message:'您还有未填写的选项请您检查后再提交'
            })
            return;
          }
        }else {
          this.currentIndex+=1;
          this.currentPaperList = this.paperList.slice((this.currentIndex-1)*3,this.currentIndex*3);
          return;
        }
    }
  }
}
</script>

<style scoped>
</style>
